@import "../../../../../../styles/variables.less";

.top-bar {
  padding: 0px 15px 0px 15px !important;
}

.tab-panel {
  margin-left: 20px;
  display: flex;

  .tab-item {
    padding: 18px;
    cursor: pointer;
    position: relative;
    transition: color 0.15s cubic-bezier(0.645, 0.045, 0.355, 1);

    &::after {
      display: inline-block;
      content: '';
      position: absolute;
      bottom: 0;
      left: 50%;
      width: 0;
      height: 2px;
      background-color: @primary-color;
      transition: width 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), opacity 0.15s cubic-bezier(0.645, 0.045, 0.355, 1);
      transform: translateX(-50%);
      opacity: 0;
    }

    &.selected {
      color: @primary-color;

      &::after {
        width: 24px;
        opacity: 1;
      }
    }
  }
}

.tab-panel-c {
  margin-left: 20px;
  display: flex;

  .tab-item {
    border: 1px solid #ccc;
    border-radius: 15px;
    cursor: pointer;
    padding: 3px 15px;
    margin: 15px;
  }

  .selected {
    background-color: @primary-color;
    border: 1px solid @primary-color;
    color: #fff;
  }
}

.file-name-title {
  background-color: #ececec;
  border: 1px solid #ccc;
  padding: 5px;
  font-size: 14px;
  margin: 13px 0;
}

.op-btn {
  color: #000;
  background-color: #ccc;
  margin-left: 15px;
  border-radius: 50%;
}
